<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInRight"
    leave-active-class="animated fadeOutRight">
    <div class="pug-drawer" v-show="isshowbox">
      <div class="pug-drawer-box-overlay" @click="closeBox"></div>
      <div class="pug-drawer-box">
        <h1>角色授权</h1>
        <div style="background: #f8f8f8;padding:20px;">
          <button @click="selectAll">选择全部</button>
          <button @click="disableAll">全部不选择</button>
          <button @click="expandAll">全部展开</button>
          <button @click="unexpandAll">全部收起</button>
          <button @click="saveRolePermission">授予权限{{roleid}}</button>
        </div>

        <pug-tree-list :treeNodes="treeNodes" :checkIds="checkIds" @select="checkedEvent"></pug-tree-list>
      </div>
    </div>
  </transition>
</template>

<script>
import roleService from '@/services/role'
import PugTreeList from "@/components/permission/PugTreeList";
import pugMessage from "@/plugins/PugMessage";

export default {
  name: "PugPermissonDrawer",
  components: {PugTreeList},
  props: {
    roleid:{
      type:Number,
      default:""
    },
    nodes: {
      type: Array,
      default: []
    },
    isshowbox: {
      type: Boolean,
      default: false
    },
    cuser: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      checkIds: [],
      treeNodes: []
    }
  },

  created() {
    this.treeNodes = this.$props.nodes;
    this.initCheckedItems();
  },

  methods: {

    saveRolePermission(){
      if(this.checkIds.length == 0){
        pugMessage.error("请选择一个在进行操作",3);
        return;
      }

      // 权限绑定
      roleService.grantRolePermission(this.roleid,this.checkIds).then(res=>{
        pugMessage.success("授权成功",3);
      })

    },

    initCheckedItems() {
      this.treeNodes = this.treeNodes.map(res => {
        if (res.checked) {
          this.checkIds.push(res.id);
        }
        this.initSelectchecked(res, true);
        return res;
      })
    },

    initSelectchecked(item, check) {
      if (item.children.length > 0) {
        item.children = item.children.map(res => {
          if (res.checked) {
            var csindex = this.checkIds.findIndex(id => id == res.id);
            if (csindex == -1) {
              this.checkIds.push(res.id);
            }
          }
          this.selectchecked(res, check);
          return res;
        })
      }
    },

    checkedEvent(ids, item, flag) {
      this.checkIds = ids;
      if (flag) {
        this.selectchecked(item, flag);
      } else {
        this.selectchecked(item, flag);
      }
    },

    expandAll() {
      this.treeNodes = this.treeNodes.map(res => {
        res.expand = true;
        this.expandItems(res, true);
        return res;
      })
    },

    unexpandAll() {
      this.treeNodes = this.treeNodes.map(res => {
        res.expand = false;
        this.expandItems(res, false);
        return res;
      })
    },

    selectAll() {
      this.treeNodes = this.treeNodes.map(res => {
        res.checked = true;
        var sindex = this.checkIds.findIndex(id => id == res.id);
        if (sindex == -1) {
          this.checkIds.push(res.id);
        }
        this.selectchecked(res, true);
        return res;
      })
    },

    disableAll() {
      this.treeNodes = this.treeNodes.map(res => {
        res.checked = false;
        var sindex = this.checkIds.findIndex(id => id == res.id);
        this.checkIds.splice(sindex, 1);
        this.selectchecked(res, false);
        return res;
      })
    },


    selectchecked(item, check) {
      if (item.children.length > 0) {
        item.children = item.children.map(res => {
          res.checked = check;
          if (check == false) {
            var sindex = this.checkIds.findIndex(id => id == res.id);
            this.checkIds.splice(sindex, 1);
          } else {
            var csindex = this.checkIds.findIndex(id => id == res.id);
            if (csindex == -1) {
              this.checkIds.push(res.id);
            }
          }
          this.selectchecked(res, check);
          return res;
        })
      }
    },

    expandItems(item, check) {
      if (item.children.length > 0) {
        item.children = item.children.map(res => {
          res.expand = check;
          this.expandItems(res, check);
          return res;
        })
      }
    },

    closeBox() {
      this.$emit("change", false);
    },

    async loadRole() {
      if (this.roleList && this.roleList.length == 0) {
        var serverResponse = await roleService.findRoleList()
        this.roleList = serverResponse.data;
      }
    },

    toRole(index) {
      this.$emit("select", this.roleList[index]);
    }
  }
}
</script>


<style scoped>
.pug-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.pug-drawer-box {
  padding: 10px 20px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 600px;
  background: #fff;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
  z-index: 100;
  overflow-y: auto;
}

.pug-drawer-box-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6)
}
</style>
